<template>
	<view>

		<!-- 选项卡 -->
		<view class="recordTab_box">
			<view class="recordTab_con">
				<view :class="'recordTabItem '+(recordTabIndex==0?'active':'')" @click="tabClick(0)">
					<text>在职</text>
				</view>
				<view :class="'recordTabItem '+(recordTabIndex==1?'active':'')" @click="tabClick(1)">
					<text>离职</text>
				</view>
			</view>
		</view>

		

		<!-- 列表 -->
		<view class="workerList_box">
			<view class="workerList_con">
				<view class="workerItem" v-for="(item,index) in workerList" :key="index" @click="workerSelect(index)">
					<!-- @click="goPage('./workerDetail?id='+item.id)" -->
					
					<view class="workerAvatar">
						{{item.userInfo.name}}
					</view>
					<view class="workerCon">
						<view class="workerName">{{item.userInfo.name}}</view>
						<view class="workerInfo">
							{{item.userInfo.mobile}}
							<text v-if="item.userInfo.mobile ">|</text>
							{{item.work_class?item.work_class:''}}
							<text v-if="item.work_class">|</text>
							{{item.salary==0? '未设工资': item.salary+'元/'}}{{item.work_type==1?"小时":'工'}}
						</view>
					</view>
				</view>
			</view>
			<!-- 分页 -->
			<view class="dataEmpty_con" v-if="workerList.length==0">
				<u-empty></u-empty>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认工地信息
				defaultWorksite: JSON.parse(uni.getStorageSync('defaultWorksite')),

				// 选项卡：0在职、1离职、2删除
				recordTabIndex: '0',

				// 工人列表
				workerList: [],
				
				type:1,
				
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			if(option.type){
				this.type=option.type
			}
		},
		onShow() {
			var _this = this;
			_this.getWorkerList();
		},
		onReady() {

		},
		onShareAppMessage() {
			var _this = this;
		},
		methods: {
			// 选项卡切换
			tabClick(val) {
				this.recordTabIndex = val;
				this.getWorkerList();
			},


			// 获取工人列表
			getWorkerList() {
				var _this = this;
				_this.$u.get('/api/project.member/getList', {
					project_id: _this.defaultWorksite.project_id,
					pages: 1,
					limit: 100000,
					quit: _this.recordTabIndex,
					type:'all'
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工人列表==");
					console.log(res);
					var workerList = res.data;
					for (var i = 0; i < workerList.length; i++) {
						workerList[i].selected = false;
					}
					_this.workerList = workerList;

					// 工地老板信息
					if (res.extend.bossInfo) {
						_this.bossInfo = res.extend.bossInfo;
					}
				}).catch(res => {
					console.log(res);
				})
			},

			// 工人单选
			workerSelect(index) {
				// console.log(index);
				var _this = this;
				var workerList = _this.workerList;
				var type=_this.type;
				if(type==2){
					uni.navigateTo({
						url:'/pages/check/checkHome?member_id='+workerList[index].id+'&project_id='+workerList[index].project_id+'&role='+workerList[index].role
					})
				}else{
					uni.navigateTo({
						url:'/pages/wage/wageHome?member_id='+workerList[index].id+'&project_id='+workerList[index].project_id
					})
				}
			},
		
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	// 添加老板
	.bossList_con {
		padding: 0 30rpx;
	}

	.bossItem {
		padding: 30rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bossAvatar {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 24rpx;
		color: $uni-color-white;
		border-radius: 10rpx;
		background: #ffc30b;
		overflow: hidden;
	}

	.bossDefault {
		width: 90rpx;
		height: 90rpx;
	}

	.bossCon {
		flex: 2;
		text-align: left;
		margin: 0 20rpx;
	}

	.bossName {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.bossRole {
		font-size: 24rpx;
		color: $uni-color-text;
		margin-top: 20rpx;
	}

	// 顶部
	.workerHead_box {
		padding: 30rpx;
		border-bottom: 2rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.workerNum {
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color-active;
	}

	.workerAll {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.workerAll text {
		margin-right: 10rpx;
	}

	// 列表
	.workerList_box {
		padding: 0 30rpx;
	}

	.workerList_con {}

	.workerItem {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.workerSelect {}

	.workerAvatar {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 24rpx;
		color: $uni-color-white;
		border-radius: 10rpx;
		background: $uni-color-active;
		overflow: hidden;
		margin: 0 20rpx;
	}

	.workerCon {
		flex: 2;
	}

	.workerName {
		font-size: 28rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.workerInfo {
		font-size: 24rpx;
		color: $uni-color-text;
		padding-top: 10rpx;
		overflow: hidden;
	}

	.workerInfo text {
		margin: 0 10rpx;
	}
</style>
